<template>
    <view class="content">
		<view class="toper">
			<image src="../../static/page/top1.png" mode="" class="clase-top"></image>
			
			<view class="center">
				<image src="../../static/page/top4.png" mode="widthFix" class="index-top"></image>
				<view class="top">
					<view class="user">
						<image :src="head" mode="" class="head-img" @click="jumpurl('/pages/user/setting')"></image>
						
						<view class="user-text">
							<view class="user-nickname">{{nickname}}</view>
							<view class="user-account">{{account}}</view>
						</view>
					</view>
				</view>
				<view class="integral">
					<view class="data">
						<view class="number bor-rig">
							<text>{{reward}}</text><br />
							{{i18n.main.reward}}
						</view>
						
						<view class="number bor-rig" @click="jumpurl('/pages/integral/total')">
							<text>{{total}}</text><br />
							{{i18n.main.total}}
						</view>
						
						<view class="number" @click="jumpurl('/pages/integral/integral')">
							<text>{{integral}}</text><br />
							{{i18n.main.integral}}
						</view>
					</view>
					
					<view class="button">
						<view class="btn" @click="jumpurl('/pages/integral/withdrawal')">
							{{i18n.main.withdrawal}}
						</view>
						
						<view class="btn1" @click="jumpurl('/pages/integral/recharge')">
							{{i18n.main.recharge}}
						</view>
						
						<view class="btn0" @click="jumpurl('/pages/integral/transfer')">
							{{i18n.main.present}}
						</view>
					</view>
				</view>
			</view>
		
			<view class="bottom">
				<image src="../../static/image/bottom.png" mode="" class='btn-img'></image>
				<view class="record">
					<view class="btn2" @click="jumpurl('/pages/user/name')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/name.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.name}}</view>
					</view>
				
					<view class="btn2" @click="jumpurl('/pages/user/team')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/team.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.team}}</view>
					</view>
				
					<view class="btn2" @click="jumpurl('/pages/user/code')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/code.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.code}}</view>
					</view>
					
					<view class="btn2" @click="jumpurl('/pages/center/problems')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/problems.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.problems}}</view>
					</view>
				
					<view class="btn2" @click="jumpurl('/pages/center/service')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/service.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.service}}</view>
					</view>
				
					<view class="btn2" @click="jumpurl('/pages/center/complaint')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/complaint.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.complaint}}</view>
					</view>
					
					<view class="btn2" @click="jumpurl('/pages/center/system')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/system.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.system}}</view>
					</view>
				
					<view class="btn2" @click="jumpurl('/pages/center/security')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/security.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.security}}</view>
					</view>
				
					<view class="btn2" @click="jumpurl('/pages/center/friend')">
						<view class="btn-top">
							<view class="num" v-if="adopt>0">{{adopt}}</view>
							<image src="../../static/center/friend.png"></image>
						</view>
						<view class="btn-bottom">{{i18n.main.friend}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<image src="../../static/page/page.png" mode="" class="back_img"></image>
    </view>
</template>

<script>
	import mIcon from '@/components/m-icon/m-icon.vue';
	import service from '../../service.js';

	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			mIcon
        },
		data() {
			return {
				back_img:uni.getStorageSync('page'),
				token:uni.getStorageSync('token'),
				account:'_',
				nickname:'',
				level:'',
				head:'',
				reward:'0.00',
				total:0,
				integral:'0.00',
				adopt:0,
			};
		},
		onShow:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.pages.user
			});
			uni.setStorageSync('type',1);
			//獲取用戶數據
			service.auth(this, service.api.main.user, {
				
			}, function(self, res) {
				var user = res.data;
				uni.setStorageSync('user',user);
				self.nickname = user.nickname;
				self.account = user.account;
				self.level = user.level;
				self.reward = user.credit2;
				self.integral = user.credit1;
				self.head = user.avatar;
			});
		},
		methods:{
			jumper: function(url) {
				uni.setStorageSync("url","/pages/main/user")
				uni.navigateTo({
					url: url,
				});
			},
			jumpurl(url){
				uni.navigateTo({
					url: url,
				});
			},
			bindLogout: function() {
				uni.setStorageSync('token','');
				uni.setStorageSync('logo','');
				uni.reLaunch({
					url: '/pages/login/login',
				});
			}
		}
    }
</script>

<style>
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.toper{
		z-index: 30;
		width: 100%;
	}
	.clase-top{
		z-index: 40;
		position: relative;
		width: 100%;
		height: 240upx;
		/* #ifndef H5 */
		height: 270upx;
		/* #endif */
	}
	.center{
		height: 400upx;
		position: relative;
		margin: 20upx 30upx;
		margin-top: -150upx;
	}
	.index-top{
		width: 100%;
		z-index: 50;
		height: 350upx;
		position: relative;
	}
	.top{
		width: 100%;
		height: 400upx;
	}
	.head,.user{
		width: 100%;
		height: 100%;
	}
	.user{
		z-index: 60;
		height: 180upx;
		position: relative;
		margin-top: -400upx;
	}
	.head-img{
		float: left;
		width: 130upx;
		height: 130upx;
		margin: 24upx 50upx;
		border-radius: 60upx;
		margin-right: 20upx;
		background: #FFFFFF;
	}
	.user-text{
		float: left;
		z-index: 30;
		height: 100upx;
		color: #FFFFFF;
		font-size: 30upx;
		position: relative;
		margin: 50upx 20upx 0;
		width: calc(100% - 260upx);
		
	}
	.user-nickname{
		color: #F793A4;
		height: 60upx;
		font-size: 40upx;
		line-height: 60upx;
	}
	.user-account{
		height: 40upx;
		color: #333333;
		font-size: 28upx;
		line-height: 40upx;
	}
	.user-level{
		color: #CCCCCC;
		font-size: 28upx;
		line-height: 40upx;
		
	}
	
	.center .head{
		border-radius: 20upx;
	}
	.integral{
		z-index: 60;
		height: 160upx;
		padding: 0 20upx;
		position: relative;
		margin-top: -210upx;
		width: calc(100% - 40upx);
	}
	.data,.button{
		width: 100%;
		height: 110upx;
		display: flex;
        flex-wrap: wrap;
		flex-direction: row;
		display: inline-flex;
	}
	.number,.btn,.btn1,.btn0{
		width: 33%;
		height: 100%;
		z-index: 40upx;
		color: #333333;
		font-size: 28upx;
		text-align: center;
		position: relative;
	}
	.bor-rig{
		border-right:1upx solid #FFFFFF;
	}
	.number text{
		color: #F7985D;
		font-size: 36upx;
	}
	.button{
		height: 80upx;
	}
	.btn,.btn1,.btn0{
		height: 70%;
		color: #FFFFFF;
		line-height: 60upx;
		margin: 12upx 20upx;
		border-radius: 10upx;
		width: calc(33% - 40upx);
		background: #F792A4;
	}
	.btn1{
		background: #F76671;
	}
	.btn0{
		background: #F7985D;
	}
	.bottom{
		z-index: 40;
		margin: 30upx;
		height: 690upx;
		width: calc(100% - 60upx);
	}
	.btn-img{
		width: 100%;
		height: 100%;
		border-radius: 20upx;
	}
	
	.record {
		display: flex;
	    flex-wrap: wrap;
		position: absolute;
		flex-direction: row;
		display: inline-flex;
		width: calc(100% - 60upx);
		margin-left: calc(-100% + 60upx);
	}
	.btn2{
		width: 28%;
		height: 190upx;
		margin-left: 4%;
		padding-top: 30upx;
		text-align: center;
	}
	.btn-top{
		height: 140upx;
	}
	.btn-top image{
		width: 120upx;
		height: 120upx;
		margin-top: 10upx;
		border-radius: 20upx;
	}
	.num{
		color: #fff;
		font-size: 20upx;
		margin-top: 8upx;
		position: absolute;
		border-radius: 40%;
		padding: 2upx 10upx;
		margin-left: 120upx;
		background-color: #fdb513;
	}
	.btn-bottom{
		color: #F76671;
		font-size: 28upx;
	}
	.back_img{
		margin: 0;
	}
</style>
